<!DOCTYPE html>
<title>lista eventi</title>
<meta charset="UTF-8">
<html>

    <link type="text/css" rel="stylesheet" href="css/leaflet.css" />
    <link type="text/css" rel="Stylesheet" href="css/bjqs.css" />
    <link type="text/css" rel="Stylesheet" href="css/jquery.jscrollpane.css" />

    <script src="js/leaflet.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bjqs-1.3.min.js"></script>
    <script src="js/jquery.jscrollpane.min.js"></script>
	<style>
	
		.icon{
			width: 25px;
			height: 25px;	
		}
		
	</style>
    <body>
        <script>
            $(document).ready(function() {
               var api_server_url ="http://osm.qmap.it";	    	
               function listaEventi(){	
            		var zoom = 12;
            		var url = api_server_url + '/api/events/' + zoom + '/' + "9.369621276855469,44.93029363624706,10.028800964355469,45.170177929417974";
            		$.ajax({
	                    url : url,
	                    dataType : 'jsonp',
	                    type : 'GET',
	                    success : function(data) {
	                        console.error(JSON.stringify(data));
	                        //alert(JSON.stringify(data));
	                        console.error("LEN:"+data.features.length);
	                        var list = $("#main ul");
	                        $.each(data.features, function(i) {
	                        	var e = data.features[i];
							    var li = $('<li/>').appendTo(list);
							    var durl = api_server_url+"/api/event/"+e.properties.ogc_fid+"/"+e.properties.lcd_from+"/"+e.properties.lcd_to+"/"+e.properties.roa_lcd+"/"+e.properties.dir+".json";
							    li.append("<p>"+durl+"</p>");
							    dettaglioEvento(durl);
							    
							});                        
	                    },
	                    error : function(jqXHR, textStatus, errorThrown) {
	                        console.error("Errore nel caricamento dati dal server: " + errorThrown);
	                    }
	                });
               }
               
               function dettaglioEvento(url){
	                $.ajax({
	                    url : url,
	                    dataType : 'jsonp',
	                    type : 'GET',
	                    success : function(data) {
	                    	var list = $("#main ul");
	                    	var li = $('<li/>').appendTo(list);
	                    	var icon1 = "<img class='icon' src='"+api_server_url+"/api/eventicons/"+data.event_type_id+"' />" ;
	                    	var icon2 = data.cause_id!=""?"<img class='icon' src='"+api_server_url+"/api/eventicons/"+data.cause_id+"' />":"" ;
	                    	li.append("<span>"+icon1+icon2+"</span>"+data.event_name
	                    		+"<p>"+data.further_info+"</p>");
	                        //li.append("<p>"+JSON.stringify(data)+"</p>");
	                    },
	                    error : function(jqXHR, textStatus, errorThrown) {
	                        console.error("Errore nel caricamento dati dal server: " + errorThrown);
	                    }
	                });
               }
               
               listaEventi();
               
            });
            
        </script>
        <div id="main"><ul></ul></div>
    </body>

</html>